import React from 'react';
import PropTypes from 'prop-types';
import cn from 'classnames';
import Helper from '../../../../components/Helper';
import s from './NumInfo.module.css';
import { Link } from 'react-router-dom';
import Icon from '../../icon';
import NuminfoIcon from '../NuminfoIcon';
import Tooltip from '@kuiper-components/tooltip';

const numFormat = function (num) {
	try {
		return new Intl.NumberFormat('en-US').format(num);
	} catch {
		return num.toLocaleString('en-US');
	}
};

export default function NumInfo({
	className,
	isShow,
	info,
	label,
	name,
	icon,
	to,
	overlay,
}) {
	return isShow ? (
		<Link to={to}>
			<div className={cn(className, s.numInfo)}>
				<div className={cn(s.label2, s.df, s.jcc, s.aic)}>
					<span className={cn(s.icon, s['icon_' + name])}></span>
					<div className={s.value}>{numFormat(info)}</div>
				</div>
				<div className={s.num}>
					<div className={s.text}>{label}</div>
				</div>
			</div>
		</Link>
	) : (
		<Tooltip overlay={`当前套餐不支持该监测项，请先升级套餐`} placement="top">
			<div className={cn(className, s.numInfo, s.exampleBox)}>
				<div className={cn(s.label, s.df, s.jcc, s.aic, s.pr)}>
					<div className={s.example}>
							<Icon active="example" />
						</div>
					<span className={cn(s.icon, s['icon_' + name])}></span>
					<div className={s.exampleValue}>0</div>
				</div>
				<div className={s.num}>
					<div className={s.exampleText}>
						{label}
						<Helper placement="top" overlay={overlay} />
					</div>
				</div>
			</div>
		</Tooltip>
	);
}

NumInfo.propTypes = {
	className: PropTypes.string,
	info: PropTypes.number,
	name: PropTypes.string,
	label: PropTypes.string,
	isShow: PropTypes.bool,
	icon: PropTypes.node,
	to: PropTypes.string,
	overlay: PropTypes.node,
};

NumInfo.defaultProps = {
	className: s.numInfo,
	info: 0,
};
